<template>
  <div class="ports">
    <!-- 港口归属问题 -->
    <!--查询表单 -->
   <el-form ref="form" :model="form" :rules="rules" label-width="8rem" size="mini">
     <el-row :gutter="17" class="row">
     <el-col :span="5">
      <el-form-item
        label="派车中心："
        prop="potDptId"
        label-width="110px"
      >
      <el-select v-model="form.potDptId" placeholder="请选择派车中心" clearable filterable>
          <el-option
          v-for="item in portData"
          :key="item.dptId"
          :label="item.dptName"
          :value="item.dptId"
          >
          </el-option>
      </el-select>
      </el-form-item>
      </el-col>
      <el-col :span="5">
      <el-form-item label="港口UUID：" prop="uuid" label-width="110px">
        <el-input v-model="form.uuid" clearable style="width: 100%"></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="5">
      <el-form-item label="港口中文名称：" prop="potCname" label-width="115px">
       <el-input v-model="form.potCname" clearable style="width: 100%"> </el-input>
      </el-form-item>
      </el-col>
      <el-col :span="2">
      <el-form-item size="mini" label-width="10px">
        <el-button type="primary" @click="submitForm('form')">查询</el-button>
      </el-form-item>
      </el-col>
      </el-row>
    </el-form>
      <!-- 主表操作按钮 -->
      <div class="btn-area" ref="detlArea">
        <el-button plain size="mini" type="primary" @click="editports" v-if="isAuth('edit')">编辑</el-button>
        <el-button
      type="primary"
      icon="document"
      @click="handleDownload"
      :loading="downloadLoading"
      size="mini"
      plain
      >{{ $t('excel.export') }} excel</el-button
    >
      </div>
    <!-- table列表 -->
    <!-- <div class="ports-table"> -->
      <!-- 主表数据展示 -->
      <!-- @row-click="" -->
      <!-- @row-dblclick='' -->
      <div class="inner" ref="inner">
      <el-table
        :data="MainTableData"
        style="width: 100%;"
        border
        :height="maxHeight"
        :header-cell-style="{ textAlign: 'center' }"
        highlight-current-row
        @row-click="rowClick"
      >
        <el-table-column type="index"  :index="indexMethod" label=" " align="center" width="50"></el-table-column>
        <el-table-column prop="uuid" label="港口UUID" ></el-table-column>
        <el-table-column prop="potCname" label="港口中文名称" ></el-table-column>
        <el-table-column prop="ctyCname" label="国家中文名称" ></el-table-column>
         <el-table-column prop="potEname" label="港口英文名称" ></el-table-column>
        <el-table-column prop="dptName" label="派车中心" ></el-table-column>
        <el-table-column prop="lastmodified" label="最后修改时间" show-overflow-tooltip align="center" sortable></el-table-column>
        <el-table-column prop="lastmodifier" label="最后修改员工"  ></el-table-column>
        <el-table-column prop="potIsvalid" label="有效标记" align="center" width="100px">
          <template slot-scope="scope">
        <el-checkbox
         :value="scope.row.potIsvalid=='Y'?true:false"
         :disabled="true"></el-checkbox>
         <!-- <span></span> -->
      </template>
        </el-table-column>
      </el-table>
      <el-pagination
      small
      background
      ref="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.PageSize"
      :layout="Pagination.layout"
      :total="Pagination.total">
    </el-pagination>
      </div>
    <!-- </div> -->
      <!-- 分页 -->


    <!-- 对话框 -->
  <el-dialog title="编辑港口信息" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <el-form :model="editData" ref="editform">
    <el-form-item
    label="港口UUID"
    :label-width="formLabelWidth"
    >
      <el-input :disabled="true" v-model="editData.uuid" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item
     label="港口中文名称"
     :label-width="formLabelWidth"
     >
      <el-input :disabled="true" v-model="editData.potCname" placeholder="请输入中文名称"></el-input>
    </el-form-item>
    <el-form-item
    label="国家中文名称"
    :label-width="formLabelWidth"
    >
      <el-input :disabled="true" v-model="editData.ctyCname" ></el-input>
   </el-form-item>
    <el-form-item
    label="港口英文名称"
    :label-width="formLabelWidth"
    >
      <el-input :disabled="true" v-model="editData.potEname" ></el-input>
   </el-form-item>
    <!-- <el-form-item
    label="修改人"
    :label-width="formLabelWidth"
    >
    <el-input :disabled="true" v-model="editData.lastmodifier"></el-input>
    </el-form-item>
    <el-form-item
    label="版本号"
    :label-width="formLabelWidth"
    >
    <el-input :disabled="true" v-model="editData.version"></el-input>
    </el-form-item>  -->
     <el-form-item
        label="派车中心"
        prop="potDptId"
        :label-width="formLabelWidth"
        :rules="[{ required: true, message: '请先选择派车中心', trigger: ['blur', 'change']}]"
      >
        <!-- <el-input v-model="editData.potDptId" placeholder="请输入派车中心"> -->
        <!-- </el-input> -->
        <el-select v-model="editData.potDptId">
            <el-option
          v-for="item in portData"
          :key="item.dptId"
          :label="item.dptName"
          :value="item.dptId"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
    <el-button @click="backEdit">关 闭</el-button>
    <el-button type="primary" @click="submitEdit">确 定</el-button>
    </div>
  </el-dialog>

  </div>
</template>
<script>
import {getPortsLista,editPorts,queryAllDepartment} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
// import isAuth from '@/mixins/buttonAuth'
export default {
  name: 'router.ports',
  mixins: [resizeMixin, paginationMixin],
  data(){
    return{
      form:{
        uuid:'',  //港口uuid
        potCname:'', //港口中文名称
        potEname:'',
        potDptId:'', //派车中心id
        fltUuid:'-1',//企业uuid
        lastmodifier:'',
        version:''
      },

      rules:{
        uuid:[{pattern: /^[a-zA-Z0-9]+$/,message:'格式不正确',trigger:['blur','change']}],
        potCname:[{min:0,max:20, pattern: /^[\u4e00-\u9fa5]+$/,message:'请输入中文不超过20个字段',trigger:['blur','change']}]
      },
      //导出
      downloadLoading: false,
      fileName:'',
      autoWidth:'',
      //表格最大高度
      maxHeight:0,
      //派车中心下拉
      portData:[],
      //分页数据
      // PageSizes:'',
      // PageIndexs:'',
      //表格数据
      MainTableData:[],
      //选中行数据
      acceptData:{},
      //修改数据
      editData:{},
      //对话框相关信息
      formLabelWidth:'120px',
      dialogFormVisible:false,
    }
  },
  created () {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight - 40
    }
  },
  mounted(){
    // console.log(this.$route.meta.BUTTONS,205)
    // try{
    queryAllDepartment().then(res=>{
      //console.log(res,184);
      this.portData=res.data.DXWCCYR
    })
    // }
    // catch(err){
    //   console.log(err);
    // }


    // console.log(this.maxHeight,this.$refs.inner.offsetHeight,204);
    // this.submitForm('form');
    // getPortsLista(this.form).then(res => {
    //   // console.log(res,111);

    //   // this.Pagination.total= res.data.total.DXWCCYR;

    //   this.getList();
    // });
    this.getList()
  },

  methods:{
    //导出
    handleDownload() {
      //console.log(this.MainTableData,239)
      var timestamp = (new Date()).valueOf()
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['港口UUID', '港口中文名称', '国家中文名称', '港口英文名称', '派车中心','最后修改时间','最后修改员工','有效标记']
        const filterVal = ['uuid', 'potCname', 'ctyCname','potEname','dptName','lastmodified','lastmodifier','potIsvalid']
        const list = this.MainTableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: timestamp,
          autoWidth: true
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j]
        })
      )
    },
    //查询
    submitForm(form){
      this.$refs[form].validate(valid => {
        if (valid) {
          //console.log(this.form);
          // getPortsLista(this.form).then(res => {
          //   console.log(res,111);
          //   //console.log(this.totalTableData.length!=0)
          //   console.log(res,265)
          //   this.Pagination.total= res.data.total.DXWCCYR;
          //   //this.$refs[form].resetFields();
          //   this.getList();
          // });
          this.getList()
          // 查询接口
        } else {
          return false
        }
      })
    },
    //获取列表数据
    getList(){

      var PageSizes=this.Pagination.pageSize
      var PageIndexs=this.Pagination.currentPage

      var valid=Object.assign(this.form,{PageSizes,PageIndexs})
      // console.log(valid)
      getPortsLista(valid).then(res=>{
        //this.Pagination.total=res.data.DXWCCYR.length;
        //console.log(res,286)
        this.Pagination.total= res.data.total.DXWCCYR
        this.MainTableData= res.data.DXWCCYR
        //updatePaginationTotal(res.data.total.DXWCCYR);
      })
    },
    //选中行事件
    rowClick(row){
      //console.log(row);
      this.acceptData=row
    },
    //编辑港口
    editports(){
      //console.log(this.acceptData.uuid);
      // for(let key in this.acceptData){
      //   this.editData[key]=this.acceptData[key];
      // }
      this.editData=JSON.parse(JSON.stringify(this.acceptData))
      // console.log(this.editData)
      if(this.editData.uuid){
        this.dialogFormVisible=true
      }else{
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
    },
    //取消提交
    backEdit(){
      this.dialogFormVisible = false
    },
    //提交修改数据
    submitEdit(){
      this.dialogFormVisible = false
      //console.log(1111);
      // console.log(this.editData);
      editPorts(this.editData).then(
        res=>{
          //console.log(res,111);
          if(res.success==1){
            this.$message({
              message:'编辑成功',
              type:'success'
            })
            this.submitForm('form')
          }else{
            this.$message({
              message:'编辑失败，请稍后重新修改',
              type:'warning'
            })
          }
        }
      )
    }
  }

}
</script>
<style lang="scss" scoped>
.ports{
  padding-top:15px;
  height:100%;
  display:flex;
  flex-direction: column;
   .btn-area{
      padding:0 15px 15px;

    }


    // min-height: 300px;
    // display:flex;
    // flex-direction: column;
    // justify-items: space-between;
    .inner{
      padding:0 15px;
      flex:1;
      box-sizing:border-box;
    }

  .block {
    padding-bottom: 5px;
    padding-right: 15px;
  }
}

</style>

